<!-- #layout name=empty -->
<div id="__mce_monaco">
  <kb-code-editor
    :code.sync="pageContent"
    auto-size
    lang="html"
    ref="codeEditor"
  ></kb-code-editor>
</div>
<style>
  #__mce_monaco {
    position: fixed;
    height: 100%;
    width: 100%;
  }
</style>

<script>
  tinymce = parent.tinymce;
  var editor = tinymce.activeEditor;
  Kooboo.loadJS(["/_Admin/Scripts/components/kb-code-editor.js"]);

  var vue = new Vue({
    el: "#__mce_monaco",
    data: function() {
      return {
        pageContent: ""
      };
    },
    mounted: function() {
      this.pageContent = editor.getContent({
        source_view: true
      });
      if (Kooboo_scoper && Kooboo_scoper.unScope) {
        this.pageContent = Kooboo_scoper.unScope(this.pageContent);
      }
      var el = parent.document.getElementById("__mce_monaco");
      el.parentElement.style.height = "100%";
    }
  });

  var submit = function() {
    if (Kooboo_scoper && Kooboo_scoper.doScope) {
      vue.pageContent = Kooboo_scoper.doScope(vue.pageContent);
    }
    editor.setContent(vue.pageContent);
  };
</script>
